<template>
  <div
    class="pro-h-scroll"
    :style="{
      width: scrollWidth,
      height: scrollHeight,
      left: `-${scrollWidth}`
    }"
  >
    <div
      class="pro-h-scroll-rotate"
      :style="{
        height: scrollWidth,
        width: containerWidth_
      }"
    >
      <slot />
    </div>
  </div>
</template>

<script lang="ts" setup name="proHScroll">
import { isString } from 'lodash-es'
const {
  width = 1200,
  height = 200,
  containerWidth = 1600
} = defineProps<{
  containerWidth?: number | string
  width?: number | string
  height?: number | string
}>()
const scrollWidth = computed(() => {
  return isString(height) ? height : height + 'px'
})
const scrollHeight = computed(() => {
  return isString(width) ? width : width + 'px'
})
const containerWidth_ = computed(() => {
  return isString(containerWidth) ? containerWidth : containerWidth + 'px'
})
</script>

<style lang="less" scoped>
.pro-h-scroll {
  position: absolute;
  left: -200px;
  width: 200px;
  height: 400px;
  box-sizing: border-box;
  transform-origin: 100% 0;
  transform: rotate(-90deg);
  overflow: scroll;
  overflow-x: hidden;
  &-rotate {
    position: absolute;
    top: 0;
    left: 200px;
    padding: 10px;
    box-sizing: border-box;
    transform-origin: 0 0;
    box-sizing: border-box;
    transform: rotate(90deg);
  }
}
</style>
